<template>
  <BasicModal
    :canFullscreen="false"
    @cancel="handleCancel"
    v-bind="$attrs"
    @register="registerModal"
    title="添加按钮"
  >
    <div class="container">
      <div style="width: 110px"> 按钮: </div>
      <CheckboxGroup v-model:value="checkValues" name="checkboxgroup" :options="menus" />
    </div>
    <template #footer>
      <a-button @click="handleCancel">关闭</a-button>
      <a-button type="primary" @click="handleSubmit">保存</a-button>
    </template>
  </BasicModal>
</template>
<script lang="ts" setup name="ButtonsModal">
  import { Checkbox } from 'ant-design-vue';
  import { ref, watch } from 'vue';
  import { BasicModal, useModalInner } from '/@/components/Modal';
  import { useMessage } from '/@/hooks/web/useMessage';

  import modelerStore from '/@/store/modules/bpmnModeler';
  const CheckboxGroup = Checkbox.Group;
  const props = defineProps({
    tabType: Number,
  });
  const emit = defineEmits(['submit', 'register']);
  const { createMessage } = useMessage();
  const modeler = modelerStore();
  const menus = ref([]);
  const checkValues = ref([]);
  const [registerModal, { closeModal }] = useModalInner(async (data) => {
    //传进来的参数
    checkValues.value = data.list.map((i) => i.name);
  });

  watch(
    () => props.tabType,
    (val) => {
      if (val === 3) {
        menus.value = modeler.configuration.menus.map((i) => ({ label: i.name, value: i.name }));
      }
    },
  );

  async function handleSubmit() {
    const params = [...checkValues.value];

    createMessage.success('操作成功');
    emit('submit', params);
    handleCancel();
  }
  function handleCancel() {
    closeModal();
  }
</script>
<style lang="less" scoped>
  .container {
    padding: 0 20px;
    display: flex;
  }
</style>
